/**
 * PostCSS的配置文件
 * 
 * PostCSS是一个处理CSS的处理工具，本身功能比较单一，它主要负责解析CSS代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的。例如：
 *  + Autoprefixer插件：可以实现自动添加浏览器相关的声明前缀
 *  + PostCSS Preset Env插件：可以让你使用更新的CSS语法特性并实现向下兼容
 *  + postcss-pxtorem: 可以实现将px转换为rem
 * 
 * PostCSS一般不单独使用，而是与已有的构建工具进行集成。
 * Vue CLI默认集成了PostCSS,并且默认开启了autoprefixer插件，
 * Vue CLI内部使用了 PostCSS。
 *  你可以通过.postcssrc 或者 任何postcss-load-config支持的配置源来配置PostCSS. 也可以通过vue.config.js中css.loaderOptions.postcss配置postcss-loader.
 *  我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用package.json的browserslist字段。
 *  
 * PostCSS是基于 Node.js 运行的一个处理CSS的工具，所以它的配置文件也是运行在Node.js中。
*/

// PostCSS
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
  // plugins: {
  //   // 这个不需要设置，因为在Vue CLI中已经设置了
  //   // 'autoprefixer': {
  //   //   browsers:['Android >= 4.0', 'iOS >= 8']
  //   // },

  //   // postcss-pxtorem 插件的版本需要 >= 5.0.0
  //   // 行内样式不会转换的
  //   'postcss-pxtorem': {
  //     //转换的根元素基准值
  //     // 正常情况下按照你的设计稿来
  //     // 750宽的设计稿 750/10 = 75 
  //     // 375宽的设计稿 375/10 = 37.5
  //     // Vant是基于375宽写的
  //     // 设计稿都是基于物理像素 750写的
  //     // 所以如果设置成75，那么我们就可以在设计稿中策略多少就写多少，但是Vant的样式就会变得很小，笑了一倍，所以我们还必须设置成37.5，但是在测量我们的设计稿的时候我们必须让你的测量单位除以2 
  //     // 有没有更好的办法，不用计算
  //     rootValue({ file }) {
  //       return file.indexOf('vant') !== -1 ? 37.5 : 75;
  //     },
  //     propList: ['*'],
  //   },
  // },
};